<template>
    <div class="ptz-panel">
        <div class="ptz-control">
            <div class="top">
                <i
                    @mousedown="cameraPtzMouseHandle('down', 'up')"
                    @mouseup="cameraPtzMouseHandle('up', 'up')"
                >
                    <img :src="getPublicImageAssetsFile('ptz/up.svg')" />
                </i>
            </div>
            <div class="middle">
                <i
                    @mousedown="cameraPtzMouseHandle('down', 'left')"
                    @mouseup="cameraPtzMouseHandle('up', 'left')"
                >
                    <img :src="getPublicImageAssetsFile('ptz/left.svg')" />
                </i>
                <i
                    @mousedown="cameraPtzMouseHandle('down', 'stop')"
                    @mouseup="cameraPtzMouseHandle('up', 'stop')"
                >
                    <img :src="getPublicImageAssetsFile('ptz/stop.svg')" />
                </i>
                <i
                    @mousedown="cameraPtzMouseHandle('down', 'right')"
                    @mouseup="cameraPtzMouseHandle('up', 'right')"
                >
                    <img :src="getPublicImageAssetsFile('ptz/right.svg')" />
                </i>
            </div>
            <div class="bottom">
                <i
                    @mousedown="cameraPtzMouseHandle('down', 'down')"
                    @mouseup="cameraPtzMouseHandle('up', 'down')"
                >
                    <img :src="getPublicImageAssetsFile('ptz/down.svg')" />
                </i>
            </div>
        </div>
        <div class="focusing">
            <i
                @mousedown="cameraPtzMouseHandle('down', 'zoomout')"
                @mouseup="cameraPtzMouseHandle('up', 'zoomout')"
            >
                <img :src="getPublicImageAssetsFile('ptz/zoomout.svg')" style="margin: 8px 4px" />
            </i>
            <span>调焦</span>
            <i
                @mousedown="cameraPtzMouseHandle('down', 'zoomin')"
                @mouseup="cameraPtzMouseHandle('up', 'zoomin')"
            >
                <img :src="getPublicImageAssetsFile('ptz/zoomin.svg')" style="margin: 4px" />
            </i>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getPublicImageAssetsFile } from '@/utils/tools'
import { getDeviceControl } from '@/api/camera'

// props
const props = defineProps<{
    info: any
}>()
/**
 * 云台控制点击事件
 */
const cameraPtzMouseHandle = async (mouseEvent: any, command: any) => {
    const params = {
        code: props.info.channelId,
        serial: props.info.deviceId,
        videoAddress: props.info.address,
        command: command,
        speed: 129,
    }
    //鼠标按下
    if (mouseEvent == 'down') {
        console.info('send ptz command', params)
        await getDeviceControl(params)
    } else {
        // 鼠标抬起，停止云台操作
        params.command = 'stop'
        console.info('send ptz command', params)
        await getDeviceControl(params)
    }
}
</script>

<style lang="scss" scoped>
.ptz-panel {
    background: #000 0% 0% no-repeat padding-box;
    border-radius: 20px;
    opacity: 0.85;
    position: absolute;
    width: 152px;
    height: 192px;
    bottom: 50px;
    right: 10px;
    .ptz-control {
        right: 20px;
        bottom: 62px;
        z-index: 101;
        font-size: 16px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        .top {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 16px;
        }
        .bottom {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 12px;
        }
        .middle {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;
        }
        i {
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            cursor: pointer;
            img {
                display: block;
                margin: 10px auto;
            }
        }
    }
    .focusing {
        z-index: 101;
        font-size: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        right: 20px;
        padding: 0 10px;
        span {
            margin: 5px 35px;
        }
        i {
            width: 18px;
            height: 18px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 9px;
            cursor: pointer;
            img {
                display: block;
            }
        }
    }
}
</style>
